<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>店面展示</title>
</head>
<body>
<jsp:include page="header.jsp"></jsp:include>

<div id="container">
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><img src="${ctx}/static/pc/img/l.png"/></a>
    <a href="javascript:;" id="next" class="arrow"><img src="${ctx}/static/pc/img/r.png"/></a>
</div>

<ul class="breadnav clearfix">
    <li class="bnav-item"><a href="${ctx}/index/list.do">首页</a></li>
    <li class="bnav-item">&lt;</li>
    <li class="bnav-item"><a href="${ctx}/shop/show.do">店面展示</a></li>
    <li class="bnav-item">&lt;</li>
    <li class="bnav-item"><a href="javascript:;" id="addr">北京店</a></li>
</ul>
<div class="clearfix table-wrap" id="tab-span">
    <c:forEach var="s" items="${addressList}" varStatus="a">
        <c:if test="${a.index==0}" var="flag">
            <span class="table-item table-active">${s}</span>
        </c:if>
        <c:if test="${not flag}">
            <span class="table-item">${s}</span>
        </c:if>
    </c:forEach>
    <span class="table-item">其他</span>
    <div class="search clearfix">
        <input class="inp-txt" type="text" name="keyword" id="mykeyword" value="输入关键字"
               onfocus="if(this.value=='输入关键字'){this.value=''};this.style.color='black';"
               onblur="if(this.value==''||this.value=='输入关键字'){this.value='输入关键字';this.style.color='gray';}" />
        <input class="inp-btn" type="button" name="" id="searchBtn" value="搜索" />
    </div>
</div>
<div id="table-div">
    <div class="table-pic table-show clearfix">
        <%--<a href="{{url}}" class="shop-wrap shop-right"><span class="shop-pic"><img src="{{img}}" alt="" /></span><p class="shop-tit">{{title}}</p></a>--%>
    </div>
    <ul class="shop-paging clearfix">
        <li><a href="shop-con.html" class="pag-item">&lt;</a></li>
        <li><a href="shop-con.html" class="pag-item pag-active">1</a></li>
        <li><a href="javascript:;" class="pag-item">2</a></li>
        <li><a href="javascript:;" class="pag-item">3</a></li>
        <li><a href="javascript:;" class="pag-item">4</a></li>
        <li><a href="javascript:;" class="pag-item">&gt;</a></li>
    </ul>
</div>

<jsp:include page="footer.jsp"></jsp:include>
<jsp:include page="common.jsp"></jsp:include>
</body>
<!--jq调用-->

<script type="text/javascript">

    //美食系列当前项切换
    $(".table-item").click(function(){
        $(this).siblings().removeClass("table-active");
        $(this).addClass("table-active");
    });
    //i当前元素的下标
    $(".table-item").click(function (i) {
        var shop_address=$(this).text();
        $("#addr").html(shop_address);
        var mydata={"shop_address":shop_address};
        loadShop(mydata);

    });
    function loadShop(mydata){
        $.post("${ctx}/shop/find.do",mydata,function (data) {
            var a='<a href="{{url}}" class="shop-wrap {{act}}"><span class="shop-pic"><img src="{{img}}" alt="" /></span><p class="shop-tit">{{title}}</p></a>';
            $(".table-pic").html("");//清空元素

            for (var i = 0; i <data.length ; i++) {
                var s=data[i];//取出当前店
                var con=a.replace("{{url}}","shop-con.do?shopId="+s.shop_id);
                con=con.replace("{{img}}","${ctx}/static/pc/"+s.shop_img);
                con=con.replace("{{title}}",s.shop_name);
                if ((i+1)%3!=0){
                    con=con.replace("{{act}}","shop-right");
                }else {
                    con=con.replace("{{act}}","");
                }
                $(".table-pic").append(con);
            }
        },"json");
    }
    $("#searchBtn").click(function () {
        //获取搜索框的值
        var mykeyword=$("#mykeyword").val().trim();
        //获取选中地址
        var shop_address=$(".table-active").text();
        var mydata={"shop_address":shop_address,"shop_name":mykeyword};
        loadShop(mydata);

    });
    //js键盘事件
    document.onkeydown=function(event)
    {
        e = event ? event :(window.event ? window.event : null);
        console.info(e.keyCode);//输出按下的键
        if(e.keyCode==13){
            //执行的方法
            $("#searchBtn").click();
        }
    }

    $(function () {
        //默认加载
        $(".table-item").eq(0).click();
    })
    //美食系列table切换
   /* var oSpan = document.getElementById("tab-span");
    var spans = oSpan.querySelectorAll("span");
    var oDiv  = document.getElementById("table-div");
    var divs = oDiv.querySelectorAll("div");
    var last=spans[0];
    for(var i=0;i<spans.length;i++){
        spans[i].index=i;  //给每一个按钮添加一个自定义属性，存储的是他们对应的索引值；
        spans[i].onclick=function(){
            divs[last.index].style.display="none"; //上一个对应的div，让他隐藏
            divs[this.index].style.display="block"; //当前点击按钮对应的div显示
            last=this; 	//把上一次点击的对象更新成当前点击的对象
        };
    };*/
</script>
</html>
